<!DOCTYPE html>
<html>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		   <div id="app"> 
			   {{name}}<br>
  			   {{hello()}}  <br/>
			   {{count}}  <br/>
              <button v-on:click="dianji">点击</button>
			  <button v-on:click="counter('wwwww')">传入参数</button>
              <button v-on:click="addCount(2)">每次加2</button>
			   <button @click="addCount(2)">每次加2</button>			  
				<br/>
				 <input type="text"   @keyup.enter="submit" id="mes" >
				 <div>会车得到的数据是: <span id="keyValue"></span></div>
				 <div :class="{mydiv1:isActive}">样式》》》》》》》》》》》》》》》》》</div>
				 
				 
				 <div>
					 {{ fullName }}
				 </div>
				  <input type="text"  v-model="msg" />
				 
				 <div>
                      {{msg}}					 
				 </div>
				 
				 <textarea rows="10" cols="40" v-model="texta"></textarea>
				 <div>{{texta}}</div>
				 
				 <input type="checkbox"  v-model="checkb"/>
				 <div>{{checkb}}</div>
				 
				     <!--favorites  多个的话，可以用数组来绑定 可以得到选中的值-->
				       <input type="checkbox" value="足球" v-model="favorites">足球</input>
				       <input type="checkbox" value="篮球" v-model="favorites">篮球</input>
				       <input type="checkbox" value="乒乓球" v-model="favorites">乒乓球</input>
				       <div>{{favorites}}</div>
				 
				 
				  <select v-model="selectO"> 
					  <option value="足球">足球</option>
                       <option value="篮球">篮球</option> 
				          <option value="乒乓球">乒乓球</option>
				  </select>
				  <div>{{selectO}}</div>    <br/>
				  
				  <select v-model="favorites1" multiple>
					   <option value="足球">足球</option>
					   <option value="篮球">篮球</option> 
					   <option value="乒乓球">乒乓球</option>
				  </select>
				 <div v-for="f in favorites1">
					  {{f}}
				 </div>
				 <br/>
				  <input type="radio" value="男" v-model="gender" />男
                  <input type="radio" value="女"  v-model="gender"/>女				 
				  <div>{{gender}}</div>
				  <br/>
				  <p>
					  true-value 和 false-value 是 Vue 为 checkbox提供的两个特殊属性，它们允许你 自定义 v-model 绑定的数据在选中和未选中状态下的值。
					  默认情况下，单个复选框的 v-model 绑定的是一个布尔值：
					  选中时，值为 true
					  未选中时，值为 false
					  而 true-value 和 false-value 让你可以把这两个值换成任何你想要的东西。
					  
				  </p>
				  <input type="checkbox"  true-value="yes" false-value="no" v-model="toggle" /> 修改得到的值
				  <p>
					  得到选中的值  {{toggle }}
				  </p>
				  <p>选中的值的类型  {{typeof toggle}}</p> 
				     <p>是否等于 'yes'? {{ toggle === 'yes' }}</p>

                       <input type="checkbox"  true-value="1" false-value="0" v-model="toggle1" /> 得到1或者0
				        <p>得到的值是 {{toggle1}}</p>
		   </div>
	</body>
	
	<script>
		var app =new Vue({
			el:"#app",
			data:{
				name:"zhangsan",
				count:0,
				message:"111",
				isActive:true,
				firstName: '张',
				lastName: '三',
				msg:"请输入内容",
				texta:"",
				checkb:false,
				favorites:[],
				selectO:"",
				favorites1:[],
				gender:"",
				toggle:"yes",
				toggle1:1,
			},
			
			methods:{
				hello:function(){
					return this.name+"你好";
				},
				dianji:function(){
					alert(this.name);
				},
				counter:function(n){
					alert(n);
				},
				addCount:function(n){
					this.count=this.count+n;
					//alert(this.count);
				},
				submit:function(){
					console.log("submit.......")
					var mes=document.getElementById("mes");
				    var keyValue=document.getElementById("keyValue");
			        keyValue.innerHTML=mes.value;
				}
				
			},//计算属性
			computed:{
				fullName:function(){
			      console.log("fullName()  1111111111112222 ..............................")
				  return this.firstName+this.lastName
				},
				
			},
		});
		
		
	</script>
	
	<style>
	      .mydiv2{
	          border:1px solid #dedede;
	      }
	      .mydiv1{
	          font-size: 30px;
	      }
	      .mydiv {
	          font-weight: bold;
	          color: #ff0000;
	      }
	  </style>
</html>
